<template>
  <!-- 加载遮罩层，当isLoading为true时显示 -->
  <div class="loading-overlay" v-if="isLoading">
    <!-- 加载动画元素 -->
    <div class="loading-spinner"></div>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * 控制加载指示器是否显示的布尔值
     * @type {Boolean}
     * @default false
     */
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
/* 加载遮罩层样式 */
.loading-overlay {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 9999; /* 确保在最上层 */
}

/* 加载动画样式 */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3; /* 浅灰色边框 */
  border-top: 4px solid #3498db; /* 蓝色顶部边框 */
  border-radius: 50%; /* 圆形 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 旋转动画关键帧 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  /* 起始角度 */
  100% {
    transform: rotate(360deg);
  }
  /* 结束角度 */
}
</style>
